import { useEffect, useRef } from 'react';
import { Row, Col } from 'antd';
import classNames from 'classnames';
import styles from './index.less';

const attendanceInfo = {
  data: {
    result: {
      morningDisease: 1,
      morningPersonal: 5,
      morningActual: 34,
      total: 40,
      afternoonDisease: 2,
      afternoonPersonal: 5,
      afternoonActual: 33,
    },
  },
};

export default () => {
  return (
    <div className={classNames(styles.wrapper)} style={{ display: 'flex' }}>
      <div className={classNames('bg', 'bg-1', styles['bg-1'])} />
      <div className="bg bg-2" />
      <Row className={styles['core-wrapper']} style={{ flexFlow: 'column', flex: 1 }}>
        <Col flex="52px">
          <Row className={classNames('linear-title', styles.title)} justify="center">
            <span>学生考勤</span>
          </Row>
        </Col>
        <Col flex="32px">
          <Row className="data-table-row" wrap={false}>
            <Col flex="80px" className="header">
              午别
            </Col>
            <Col flex="80px" className="header">
              病假
            </Col>
            <Col flex="80px" className="header">
              事假
            </Col>
            <Col flex="80px" className="header">
              实到人数
            </Col>
            <Col flex="80px" className="header">
              总人数
            </Col>
          </Row>
        </Col>
        <Col flex="32px">
          <Row className="data-table-row" wrap={false}>
            <Col flex="80px">上午</Col>
            <Col flex="80px">{attendanceInfo.data?.result?.morningDisease}</Col>
            <Col flex="80px">{attendanceInfo.data?.result?.morningPersonal}</Col>
            <Col flex="80px">{attendanceInfo.data?.result?.morningActual}</Col>
            <Col flex="80px">{attendanceInfo.data?.result?.total}</Col>
          </Row>
        </Col>
        <Col flex="32px">
          <Row className="data-table-row" wrap={false}>
            <Col flex="80px">下午</Col>
            <Col flex="80px">{attendanceInfo.data?.result?.afternoonDisease}</Col>
            <Col flex="80px">{attendanceInfo.data?.result?.afternoonPersonal}</Col>
            <Col flex="80px">{attendanceInfo.data?.result?.afternoonActual}</Col>
            <Col flex="80px">{attendanceInfo.data?.result?.total}</Col>
          </Row>
        </Col>
      </Row>
    </div>
  );
};
